<template>
  <div>
    <introduce>
      <span class="title-gray" slot="pre">计费/</span>
      <span class="title-bold" slot="title"> 充值记录</span>
      <span slot="info"> - 展示当前账户的消息额度的所有充值记录。</span>
    </introduce>
    <el-card>
      <el-form>
        <el-form-item label="月份选择：">
          <el-date-picker
            v-model="query.date"
            type="month"
            placeholder="选择月"
            @change="getRechargeList"
          >
          </el-date-picker>
        </el-form-item>
      </el-form>
      <el-table
        :data="rechargeList"
        stripe
        style="width: 100%; margin-top: 10px"
      >
        <el-table-column type="index" width="50" label="序号">
        </el-table-column>
        <el-table-column prop="id" label="充值id" width="180"></el-table-column>
        <el-table-column label="日期">
          <template slot-scope="scope">
            {{ scope.row.cTime | dateformat }}
          </template>
        </el-table-column>
        <el-table-column prop="amount" label="充值金额"> </el-table-column>
        <el-table-column label="备注" prop="desc"></el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="query.currPage"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="query.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
import { $rechargeList } from "@/api/index";
import Introduce from "@/components/Introduce.vue";
export default {
  name: "rechargeView",
  data() {
    return {
      rechargeList: [],
      total: 0,
      query: {
        currPage: 1,
        pageSize: 5,
        date: "",
      },
    };
  },
  mounted() {
    this.getRechargeList();
  },
  components: { Introduce },
  methods: {
    handleSizeChange(count) {
      this.query.pageSize = count;
      this.query.currPage = 1;
      this.getRechargeList();
    },
    handleCurrentChange(page) {
      this.query.currPage = page;
      this.getRechargeList();
    },
    getRechargeList() {
      console.log(this.query.date);
      if (this.query.date && this.query.date.length !== 0) {
        var dateArr = this.query.date;
        this.query.date = this.dateStr;
      }
      $rechargeList(this.query).then((res) => {
        console.log(res);
        this.rechargeList = res.data.data;
        this.total = res.data.total;
      });
      this.query.date = dateArr;
    },
  },
  computed: {
    dateStr() {
      let y = this.query.date.getFullYear();
      let m = (this.query.date.getMonth() + 1 + "").padStart(2, "0");
      return y + "-" + m;
    },
  },
  filters: {
    dateformat(val) {
      let t = new Date(+val);
      let y = t.getFullYear();
      let m = (t.getMonth() + 1 + "").padStart(2, "0");
      let d = (t.getDate() + "").padStart(2, "0");
      return `${y}-${m}-${d}`;
    },
  },
};
</script>

<style lang="less" scoped>
.block {
  text-align: center;
}
</style>
